iT邦幫忙

2024 iThome 鐵人賽

DAY 22
0
Python

自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作系列 第 22

Day22 藉由教學影片學習HTML與CSS基礎

  • 分享至 

  • xImage
  •  

今天要分享的是CSS中的基本語法三種使用方式顏色字體 font以及邊框 border
CSS:
selector選擇器/用於定位html中的元素,找html的元素
declaration聲明區塊/實際撰寫定義元素的樣式,每個聲明區塊包含一個或多個屬性+值

一、基本語法
創一檔案index_2.html按右鍵點選Open with Live Server
#在my-header下的p才會受影響,其他的p不會
https://ithelp.ithome.com.tw/upload/images/20241002/201677872ZVFBXgBfN.png
二、三種使用方式
** 1.行內樣式(Inline Styling)-只能一行一行逐一修改字體顏色,在body中的p後面加上
2.內嵌樣式(Embedded Styling)-只有同個頁面的字體顏色會變相同
3.外部樣式表(External Stylesheets)-同時改變兩個頁面的字體顏色**
1.
https://ithelp.ithome.com.tw/upload/images/20241002/201677870II72UR42U.png
2.https://ithelp.ithome.com.tw/upload/images/20241002/20167787nKLwHjsvez.png
3.
#會新增"style.css",後在index_2.html跟second.html引入style.css,即可一次改變所有頁面的字體顏色
index_2.html
https://ithelp.ithome.com.tw/upload/images/20241002/20167787ZD1Wn7Y3f6.png
second.html
https://ithelp.ithome.com.tw/upload/images/20241002/201677870zfNQzaMy3.png
style.css
https://ithelp.ithome.com.tw/upload/images/20241002/20167787sLdUYYSdJO.png
三、顏色 color
p1:顏色名稱(blue)
p2:RGB色彩三元素red/green/blue(rgb(100,65,30))
p3:16進制(#000000)
p4:HSL色調/飽和度/亮度(hsl(100,75%,75%))

#p1,p2,p3,p4的屬性是id,所以要加"#"
https://ithelp.ithome.com.tw/upload/images/20241002/20167787fjniQwkNHE.png
四、字體 font
字體類別:font-famliy
字體大小:font-size
字體粗細:font-weight
字體風格:font-style

https://ithelp.ithome.com.tw/upload/images/20241002/20167787AnBy8x9FAE.jpg
五、邊框 border
border-style:邊界的形式,實線(solid)/虛線(dashed)/點線(dotted)
border-width:邊界長度
border-color:邊界顏色
border-radius:圓邊

https://ithelp.ithome.com.tw/upload/images/20241002/20167787KpKA7txWtW.jpg


以上是我今天的分享,文章內容的截圖包含我的註解筆記,在第25天會分享目前自主學習的心得,謝謝大家!
參考網址:https://www.youtube.com/watch?v=fa214Ct6t9w&list=LL&index=3


上一篇
Day21 藉由教學影片學習HTML與CSS基礎
下一篇
Day23 藉由教學影片學習HTML與CSS基礎
系列文
自主學習Python網路爬蟲-PTT爬蟲、Hahow爬蟲、Yahoo電影爬蟲實作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言